<template>
	<v-forms ref="formRef" :hideFooter="!formState">
		<template #tint1="scope">
			<el-Divider content-position="left" style="margin: 5px 0px"
				><span style="color: #1a63db; font-weight: bold">{{ scope.data.item.label }}</span></el-Divider
			>
		</template>
		<template #File>
			<template v-if="formState">
				<el-upload :auto-upload="false" v-model:file-list="fileList" multiple :limit="9" :on-change="(file: any, files: any) => { fileChangeHandle(file, files, item) }">
					<el-button type="primary">{{ $t('xvVAj8nsqMqxwINugqZy1') }}</el-button>
				</el-upload>
			</template>
			<template v-else>
				<!-- <el-badge :value="currentChangeData.v_FilePath?.length || 0" type="primary">
					<el-button type="primary" @click="pushFile">{{ $t('tprg1gtr13wMxReXmK14U') }}</el-button>
				</el-badge> -->
				<v-table :data-list="showFileList" v-bind="fileListTableConfig">
					<template #image="scope"> <img v-if="isImagePath(scope.row.path)" style="width: 60px; height: 30px" :src="pathData + scope.row.path" /> </template>
					<template #operation="scope">
						<el-button @click="pushAction(scope.row)" type="primary" text size="small"> {{ $t('i8A6uFe7Z4rYBFs9LUfm') }} </el-button>
						<el-button v-if="formState == 2" @click="deleteAction(scope.row)" type="danger" text size="small"> {{ $t('mkwlMbm3qr88f0XxV9Pje') }} </el-button>
					</template>
				</v-table>
			</template>
		</template>
		<template #Detail>
			<template v-if="formState == 2">
				<!-- <el-badge :value="tempCount" type="primary">
					<el-button type="primary" @click="pushFile">{{ $t('tprg1gtr13wMxReXmK14U') }}</el-button>
				</el-badge> -->
				<v-table v-if="formState == 2" :data-list="showFileList" v-bind="fileListTableConfig">
					<template #image="scope"> <img v-if="isImagePath(scope.row.path)" style="width: 60px; height: 30px" :src="pathData + scope.row.path" /> </template>
					<template #operation="scope">
						<el-button @click="pushAction(scope.row)" type="primary" text size="small"> {{ $t('i8A6uFe7Z4rYBFs9LUfm') }} </el-button>
						<el-button v-if="formState == 2" @click="deleteAction(scope.row)" type="danger" text size="small"> {{ $t('mkwlMbm3qr88f0XxV9Pje') }} </el-button>
					</template>
				</v-table>
			</template>
		</template>

		<v-file-list ref="fileRef" @deleteFile="deleteAction"></v-file-list>
	</v-forms>
</template>
<script lang="ts" setup>
import { ref, Ref } from 'vue';
import { troubleFormConfig, VForms, troubleDetailFormConfig } from '../config/form/index';
import request from '/@/api/common/common';
import useCurrentInstance from '/@/utils/hook/useCurrentInstance';

import { fileListTableConfig } from '../config/table/index';
import { vFileList, isImagePath } from '/@/components/ys/index';
import vTable from '/@/components/table/v-table.vue';
import eventBus from '/@/utils/eventBus';
const showFileList: any = ref([]);
const pathData = window.$host + '/';

const { proxy } = useCurrentInstance();
const $t = proxy.$t;
const formRef = ref();
const fileRef = ref();
let contracListURL: any = ref([]);
let formState: any = ref(1); //当前form表单状态 0详情 1新增 2修改

let tempCount = ref(0);

let currentChangeData: any;
//上报人员id数组
let empIDs: any = ref([]);
//上报人员name数组
let empNames: any = ref([]);

const fileList: any = ref([]);

const emit = defineEmits(['refresh']);

const deleteAction = async (ids: any) => {
	//过滤掉被删除的id
	// removeData(currentChangeData.v_FilePath, ids);
	// emit('refresh');

	await request.postDeleteFilesData({
		id: ids.id,
	});
	showFileList.value = showFileList.value.filter((item: any) => item.id != ids.id);
	eventBus.emit('getData');
};

function removeData(originalArray: any, idArray: any) {
	for (let i = originalArray.length - 1; i >= 0; i--) {
		if (idArray.includes(originalArray[i].id)) {
			originalArray.splice(i, 1);
		}
	}
	tempCount.value = originalArray.length;
}

//附件管理
const pushFile = async () => {
	let filePush = [];
	for (let index = 0; index < currentChangeData.v_FilePath?.length; index++) {
		const element = currentChangeData.v_FilePath[index];
		let newE = JSON.parse(JSON.stringify(element));
		newE.path = window.$host + '/' + newE.path;
		let parts = newE.path.split('/');
		let filename = parts.pop();
		if (!newE.name) {
			newE.name = filename;
		}
		if (!newE.fileType) {
			newE.fileType = filename.split('.').pop();
		}

		filePush.push(newE);
	}
	await fileRef.value.openHandle({
		list: filePush,
		canAdd: false,
		canDelete: formState.value == 2,
		// uploadMethod: request.postFilesData,
		// uploadParams: {
		// 	sourceId: currentChangeData.n_FileId,
		// 	sourceType: 'SMS',
		// },
		deleteFileMethod: request.postDeleteFilesData,
	});
};

// 新增文件
const fileChangeHandle = (file: any, files: any[], formItem: any) => {
	fileList.value = files;
};
//新增数据
const addNew = (data: any) => {
	showFileList.value = [];
	fileList.value = [];
	contracListURL.value = [];
	formState.value = 1;
	let list: any = troubleFormConfig(data, !formState.value);
	formRef.value.openDialog(list, $t('nB9iLjnL1SuyafWYlQXdl'));
};
const change = (data: any) => {
	fileList.value = [];
	formState.value = 2;
	processData(data);
	let list: any = troubleFormConfig(currentChangeData, !formState.value);
	formRef.value.openDialog(list, $t('bdeAwolp2JjvkjLb37PJz'));
};
//处理展示数据
const processData = (data: any) => {
	contracListURL.value = [];
	if (data.v_FilePath) {
		data.v_FilePath.forEach((item: any) => {
			contracListURL.value.push(item.path);
		});
	}
	currentChangeData = JSON.parse(JSON.stringify(data));
	console.log('currentChangeData', currentChangeData);
	tempCount.value = currentChangeData.v_FilePath?.length || 0;
	showFileList.value = currentChangeData.v_FilePath;
	empIDs.value = [];
	empNames.value = [];
	for (let index = 0; index < currentChangeData.accientEmps.length; index++) {
		let accientEmp = currentChangeData.accientEmps[index];
		empIDs.value.push(accientEmp.n_EmpId);
		empNames.value.push(accientEmp.empName);
	}
	// console.log('accientEmps', empNames);
	currentChangeData.accientEmps = empNames;
};
//新增数据变更
const detail = (data: any) => {
	formState.value = 0;
	processData(data);
	let list: any = troubleDetailFormConfig(currentChangeData, !formState.value);
	formRef.value.openDialog(list, $t('206DptDPfYv4X18H9X7Ag'));
};
const pushAction = (data: any) => {
	window.open(pathData + data.path, '_blank');
};
defineExpose({
	addNew,
	detail,
	fileList,
	change,
	empIDs,
	empNames,
});
</script>
<scope lang="scss" scoped></scope>
